<template>
  <div class="main-container">
    <!-- tab导航 -start-->
    <tabs />
    <!-- 搜索 start -->
    <edu-page-search ref="searchMaterial" :bind-search="searchMaterial">
      <template v-slot:page-button>
        <el-button v-if="permsUpload" size="mini" type="primary" @click="create">上传音频</el-button>
      </template>
    </edu-page-search>
    <!-- 搜索 end-->
    <!-- tab导航 -end-->
    <el-row type="flex" align="top">
      <left :category="category" material-type="audio" material-type-title="音频分组" :is-recycle="!!recycle" @update:recycle="updateRecycle" @update:selectCategory="selectCategory" />
      <right
        v-if="showRight"
        material-type="audio"
        :datas="fileList"
        :recycle="!!recycle"
        @update:filename="updateFilename"
        @update:duration="updateDuration"
        @reload="reload"
      />
    </el-row>
    <upload-file v-if="visible" material-type="audio" :upload-visible.sync="visible" :category="category" :current-category="currentCategory" @reload="reload" />
  </div>
</template>

<script>
import Left from './components/left.vue';
import Right from './components/file_list.vue';
import UploadFile from './components/upload_file.vue';
import EduPageSearch from '@public/template/page_list/search.vue';
import { mapState } from 'vuex';
import Tabs from './tabs.vue';
export default {
  components: {
    Tabs,
    Left,
    Right,
    UploadFile,
    EduPageSearch
  },
  data() {
    return {
      xUri: '/admin/material/audio',
      visible: false,
      currentCategory: -1,
      recycle: 0,
      showRight: true
    };
  },
  computed: {
    ...mapState('pageList', {
      category: state => (state.responseData ? state.responseData.category : []),
      fileList: state => (state.responseData ? state.responseData.datas : [])
    }),
    ...mapState(['loadingStatus']),
    permsUpload() {
      return this.hasPermission({
        permission: 'material.audio.upload'
      });
    }
  },
  watch: {
    loadingStatus(status) {
      // 没有加载时,设置右侧状态为显示状态
      if (status === false) {
        this.showRight = true;
      }
    }
  },
  created() {
    this.$store.dispatch('pageList/page', {
      uri: this.xUri,
      params: {
        count: 50,
        category: this.currentCategory
      }
    });
  },
  methods: {
    create: function() {
      this.visible = true;
    },
    // 切换分组
    selectCategory: function(id) {
      this.currentCategory = id;
      this.recycle = 0;
      const searchForm = this.$refs['searchMaterial'].search_form;
      const params = {
        page: 1,
        category: id,
        ...searchForm
      };
      // 触发paginate
      this.$store.dispatch('pageList/loadData', { params: params });
      this.reloadRight();
    },
    // 搜索
    searchMaterial: function(search) {
      const params = {
        page: 1,
        category: this.currentCategory,
        ...search,
        recycle: this.recycle
      };
      // 触发paginate
      this.$store.dispatch('pageList/loadData', { params: params });
      this.reloadRight();
    },
    // 更新文件名称
    updateFilename: function(data) {
      const item = this.fileList.find(item => item.id == data.id);
      item.filename = data.filename;
    },
    // 更新文件时长
    updateDuration: function(data) {
      const item = this.fileList.find(item => item.id == data.id);
      item.duration_format = data.duration;
    },
    // 重载素材
    reload: function() {
      const search = this.$refs['searchMaterial'].search_form;
      const params = {
        category: this.recycle ? 0 : this.currentCategory,
        ...search,
        recycle: this.recycle
      };
      // 触发paginate
      this.$store.dispatch('pageList/loadData', { params: params });
      this.reloadRight();
    },
    updateRecycle: function() {
      this.recycle = 1;
      const params = {
        category: 0,
        recycle: this.recycle
      };
      this.$store.dispatch('pageList/loadData', { params: params });
      this.reloadRight();
    },
    reloadRight: function() {
      this.showRight = false;
    }
  }
};
</script>

<style></style>
